<template>
  <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
    <div class="AreaData">
      <div class="bg_fff">
        <Type :scriptList="scriptList" types="statistics" @changeScript="changeScript" @changeStatisticsType="changeStatisticsType"></Type>

        <Title :title="title"></Title>
        <div v-if="dataList.length > 0" class="fl vc w pdl_12">
          <div class="wb33 fl vc dx_14 color_666 pdr_20 mb16" v-for="(item, index) in dataList" :key="index">
            <p class="fl1 omit">{{ item.name }}</p>
            <p class="fls">({{ statisticsType == 1 ? item.activationCount : item.openScriptCount }})</p>
          </div>
        </div>
        <div v-if="dataList.length == 0" class="bg_fff">
          <van-empty description="暂无数据~" />
        </div>
      </div>
      
    </div>
  </van-pull-refresh>
</template>

<script>
import Title from '../components/Title.vue'
import Type from '../components/Type.vue'
import { PullRefresh } from 'vant';

import { reportStoreRegionalCount } from '@/api/chart.js'
import mathUtil from '@/utils/mathUtil'
export default {
  components: {
    [PullRefresh.name]: PullRefresh,
    Title,
    Type
  },

  props: {
    scriptList: {
      type: [Object, Array],
      default: () => [],
    }
  },

  data() {
    return {
      mathUtil,
      scriptId: '',
      scriptName: '',

      title: '激活数据地区详情',
      statisticsType: 1,

      dataList: [],
      isLoading: false,

      refreshLoading: false,

    };
  },

  watch: {
    "$store.state.token": {
      handler:function() { 
        this.getRegionalCountList()
      }
    }
  },

  created() {
    if (this.$store.state.token || sessionStorage.getItem('cspace-token')) {
      this.getRegionalCountList()
    }
  },

  methods: {
    changeScript(id, name) {
      console.log('scriptId', id)
      this.scriptId = id
      this.scriptName = name
      this.getRegionalCountList()
    },

    changeStatisticsType(id) {
      console.log('statisticsType', id)
      this.statisticsType = id
      this.title = this.statisticsType == 1 ? '激活数据地区详情' : '开本数据地区详情'
      this.getRegionalCountList()
    },

    onRefresh() {
      setTimeout(() => {
        this.refreshLoading = false;
        this.getRegionalCountList()
      }, 1000);
    },

    // 获取激活数据（图表）
    async getRegionalCountList () {
      this.isLoading = true
      try {
        const params = {
          request: {
            dto: {
              scriptId: this.scriptId,
              region: this.statisticsType
            }
          }
        }
        const res = await reportStoreRegionalCount(params)
        console.log('地区统计数据', res)
        if (res.errorCode === 0) {
          this.dataList = res.response
        }
        this.isLoading = false
      } catch (error) {
        console.error(error)
        this.isLoading = false
      }
    }

  }
};
</script>

<style lang="less">
.AreaData {
}
.pdl_12 {
  padding-left: 12px;
}

</style>
